<template>
	<view class="page login">
		<view class="l-header">
			<view class="h-tabs">
				<view :class="{'t-item-active':tabCurrentIndex === 0}"
					@click="changeTab(0)">
					<text>账号密码登录</text>
				</view>
				<view :class="{'t-item-active':tabCurrentIndex === 1}"
					@click="changeTab(1)">
					<text>手机快捷登录</text>
				</view>
			</view>
			<view class="h-forms">
				<view class="f-input">
					<input type="text" v-model="form.count" placeholder="手机号/邮箱/用户名"
						v-show="tabCurrentIndex === 0" />
					<input type="text" v-model="form.count" placeholder="请输入手机号"
						v-show="tabCurrentIndex === 1" />
				</view>
				<view class="f-input">
					<input type="password" v-model="form.passport" placeholder="密码"
						v-show="tabCurrentIndex === 0" />
					<input type="text" v-model="form.passport" placeholder="请输入验证码"
						v-show="tabCurrentIndex === 1" />
				</view>
				<view class="f-input">
					<button :class="getState" hover-class="i-tap"
						@click="handleSubmit"
						:disabled="disabled">登录</button>
					<view class="i-forget">
						<text>没有账号?点击此处注册</text>
						<text>忘记密码?</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="l-other">
			<view class="o-title">第三方合作账号快速登录</view>
			<view class="o-img">
				<image src="../../static/img/tencent.png"></image>
				<image src="../../static/img/taobao.png"></image>
				<image src="../../static/img/sina.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
var  graceChecker = require("../../common/js/graceChecker.js");
import { mapMutations,mapState } from 'vuex'
export default {
	data() {
		return {
			tabCurrentIndex: 0,
			disabled: true,
			form: {
				count: '',
				passport: ''
			},
			// 定义表单验证规则
			rule: [
				{name:"count", checkType: "string", checkRule:"4,20", errorMsg:"账号应该大于4位"},
				{name:"passport", checkType: "string", checkRule:"6,20", errorMsg:"密码应大于6位"}
			]
		};
	},
	computed: {
		getState() {
			let res = this.form.count && this.form.passport
			if(res){
				this.disabled = false
				return 'i-active'
			}
			this.disabled = true
			return ''
		},
		...mapState(['isLogin'])
	},
	methods: {
		changeTab(index){
			this.tabCurrentIndex = index
		},
		handleSubmit() {
			console.log(this.form);
			let checkRes = graceChecker.check(this.form, this.rule);
			if(!checkRes){
				uni.showToast({ title: graceChecker.error, icon: "none" });
			}else {
				this.login()
				if(this.isLogin) {
					setTimeout(() => {
						/* uni.redirectTo({
							url: '../cart/cart'
						}) */
						console.log("页面跳转了");
					},600)
				}
			}
			
		},
		...mapMutations({
			login: 'login'
		}),
	}
}
</script>

<style lang="less">
@import "./login";
</style>
